<template>
	<view class="sp-section sp-oa">
		<!-- 分类 -->
		<view class="sp-oa__type">
			<view class="sp-oa__type-item" :class="{ 'active': typeIndex === 0 }" @click="setTypeIndex(0)">
				<view class="sp-oa__type-pics">
					<image src="@/static/images/oa/type1.png"></image>
				</view>
				<text>未拍场</text>
			</view>
			<view class="sp-oa__type-item" :class="{ 'active': typeIndex === 1 }" @click="setTypeIndex(1)">
				<image src="@/static/images/oa/type2.png"></image>
				<text>未拍栋舍</text>
			</view>
			<view class="sp-oa__type-item" :class="{ 'active': typeIndex === 2 }" @click="setTypeIndex(2)">
				<image src="@/static/images/oa/type3.png"></image>
				<text>已拍栋舍</text>
			</view>
			<view class="sp-oa__type-item" :class="{ 'active': typeIndex === 3 }" @click="setTypeIndex(3)">
				<image src="@/static/images/oa/type1.png"></image>
				<text>料量不足</text>
			</view>
			<view class="sp-oa__type-item" :class="{ 'active': typeIndex === 4 }" @click="setTypeIndex(4)">
				<view class="sp-oa__type-pics">
					<image src="@/static/images/oa/type1.png"></image>
				</view>
				<text>料槽过满</text>
			</view>
		</view>
		
		<!-- 列表 -->
		<view class="sp-oa__content">
			
			<!-- banner -->
			<view class="sp-oa__banner">
				<image src="../../static/images/oa/banner.jpg"></image>
			</view>
			
			<!-- 场/栋舍 -->
			<template v-if="typeIndex === 0">
				<view class="sp-oa__boxes">
					<u-cell-group v-if="farm && farm.f_farm">
						<u-cell
							v-for="(item, key, $index) in farm.f_farm"
							:key="$index"
							class="sp-oa__boxes-name"
							:title="key"
						/>
					</u-cell-group>
				</view>
			</template>
			<template v-if="typeIndex > 0 && typeIndex < 3">
				<template>
					<view class="sp-oa__boxes" v-for="(item, key, $index) in farm[typeIndex === 1 ? 'f_farm' : 't_farm']" :key="$index">
						<u-collapse :border="false" :value="[key]">
							<u-collapse-item class="sp-oa__boxes-name" :name="key" :title="key">
								<view class="sp-oa__boxes-list" v-if="item && item.length">
									<view
										class="sp-oa__boxes-item"
										:class="{
											'sp-oa__type-badge': typeIndex == 3
										}"
										v-for="tags in item"
										:key="tags"
									>
										<text>{{ tags }}</text>
									</view>
								</view>
								<u-empty v-else />
							</u-collapse-item>
						</u-collapse>
					</view>
				</template>
			</template>
			<template v-if="typeIndex >= 3">
				<view class="sp-oa__boxes" v-for="(item, key, $index) in feed[typeIndex === 3 ? 'empty' : 'full']" :key="`3-${$index}`">
					<u-collapse :border="false" :value="[key]">
						<u-collapse-item class="sp-oa__boxes-name" :name="key" :title="key">
							<view v-for="(tags, name, $tags) in item" :key="$tags">
								<view class="sp-oa__boxes-name">{{ name }}</view>
								<view class="sp-oa__boxes-list">
									<view
										class="sp-oa__boxes-item"
										:class="{
											'sp-oa__type-badge': typeIndex == 3
										}"
										v-for="col in tags"
										:key="`3-c-${col.scene_name}`"
									>
										<text>{{ col.scene_name }}</text>
									</view>
								</view>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import dayjs from '@/utils/dayjs.min.js'
	import { getRecordFarmList, getRecordFeedList } from '@/api/alot.js'
	
	export default {
		name: 'spIndexData',
		data() {
			return {
				typeIndex: 0,
				list: [],
				recordList: [],
				recordParams: {},
				// 农场
				farm: [],
				feed: {
					full: {},
					empty: {},
				}
			}
		},
		onShow() {},
		mounted() {
			this.getRecordFarmList()
			this.getRecordFeedList()
			this.getRecordFeedList('过满')
		},
		methods: {
			setTypeIndex(index) {
				this.typeIndex = index
			},
			// 获取已拍场/已拍、未拍栋舍
			getRecordFarmList() {
				const users = uni.getStorageSync('aiUserInfo')
				uni.request({
					url: `${getRecordFarmList}?institute=${users.enterprise_id}`,
					method: 'GET',
					success: (res) => {
						this.farm = res.data.data
					}
				})
			},
			// 获取料槽料量 
			getRecordFeedList(status = '空的') {
				const users = uni.getStorageSync('aiUserInfo')
				uni.request({
					url: `${getRecordFeedList}${status}&institute=${users.enterprise_id}`,
					method: 'GET',
					success: (res) => {
						this.feed[status === '空的' ? 'empty' : 'full'] = res.data.data
					}
				})
			}
		}
	}
</script>

<style>
</style>